//html 加载过程 从上往下
//组件名：myComp => 使用时必须松散命名 <my-Comp>
//组件就是将页面元素写在组件内部Vue对象
//Vue组件的页面元素必须是单根节点

Vue.component("bbs",{
    //要想多行写必须使用反引号即：``
    template:`
        <div>
            <DIV class="logo">
                <IMG src="image/logo.gif">
            </DIV>
            <!--      用户信息、登录、注册        -->

             <DIV class="h">
                <div class="login" v-if="myinfo==null">
                    您尚未　<a href="login.html">登录</a>
                    &nbsp;| &nbsp; <A href="reg.html">注册</A> |
                </div>
                <div class="login" v-else style="display: flex;align-items: center;gap: 5px">
                    欢迎：{{myinfo.uname}}
                    <el-avatar size="small" 
                    :src="myinfo.head"></el-avatar>
                    <a href="login.html">修改密码</a>
                    &nbsp;| &nbsp; 
                    <A href="user/logout">退出</A> |
                </div>
             </DIV>
            
            <slot></slot>
            
            <BR/>
            <CENTER class="gray">源辰信息</CENTER>
        </div>
    `,
    data(){
        return{
            myinfo:null
        };
    },
    //创建钩子函数
    created(){
        axios.get("user/myinfo")
            .then(res=>this.myinfo=res.data.data);
    },
    mothods:{},
    //计算属性
    computed:{},
    //第一次渲染的钩子函数
    mounted(){},
    //第N次渲染的钩子函数
    updated(){},
});